<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间平台跳跃 - 关卡编辑器</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #222;
            color: white;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        
        /* 编辑器容器 */
        #editor-container {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        
        /* 游戏地图视图 */
        #map-view {
            position: relative;
            flex: 1;
            background-color: #333;
            overflow: hidden;
            transform: scaleY(-1); /* 垂直翻转地图视图 */
        }
        
        /* 元素面板 */
        #element-panel {
            width: 250px;
            background-color: #444;
            padding: 10px;
            overflow-y: auto;
            border-left: 2px solid #555;
        }
        
        /* 元素类别标题 */
        .element-category {
            margin-top: 15px;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 1px solid #666;
            font-weight: bold;
        }
        
        /* 地图上的元素 */
        .map-element {
            position: absolute;
            cursor: pointer;
            z-index: 10;
            transform: scaleY(-1); /* 垂直翻转元素 */
        }
        
        /* 平台样式 */
        .platform {
            height: 30px;
            background-color: #2ecc71;
            opacity: 0.7;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: white;
            text-shadow: 1px 1px 1px black;
            overflow: hidden;
        }
        
        /* 墙壁样式 */
        .wall {
            width: 30px;
            background-color: #2ecc71;
            opacity: 0.7;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: white;
            text-shadow: 1px 1px 1px black;
            overflow: hidden;
        }
        
        /* 玩家起始点样式 */
        .player-start {
            width: 40px;
            height: 60px;
            background-color: #3498db;
            border-radius: 10px;
        }
        
        /* 门样式 */
        .door {
            width: 60px;
            height: 100px;
            background: linear-gradient(to bottom, #3498db, #2980b9);
            border: 2px solid #ffffff;
            border-radius: 10px;
        }
        
        /* 播放按钮样式 */
        .play-button {
            width: 30px;
            height: 30px;
            background-color: #FFD700; /* 修改为金色 */
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
        
        /* 钥匙样式 */
        .key {
            width: 20px;
            height: 40px;
            background-color: #FFD700;
            position: relative;
        }
        
        .key::before {
            content: '';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 15px;
            height: 15px;
            background: #FFF;
            border: 5px solid #FFD700;
            border-radius: 40%;
        }
        
        /* 沙漏样式 */
        .hourglass {
            width: 30px;
            height: 40px;
            background-color: #007BFF;
            border-radius: 5px;
        }
        
        /* 告示板样式 */
        .sign {
            background-color: #333;
            border-radius: 10px;
            padding: 10px;
            text-align: center;
            font-size: 14px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* 选中元素的高亮 */
        .selected {
            box-shadow: 0 0 0 2px #f1c40f;
        }
        
        /* 属性编辑器 */
        #property-editor {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.9);
            padding: 20px;
            border-radius: 5px;
            z-index: 100;
            display: none;
            width: 300px;
        }
        
        .property-row {
            margin-bottom: 10px;
        }
        
        .property-row label {
            display: block;
            margin-bottom: 5px;
        }
        
        .property-row input, .property-row textarea, .property-row select {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
        }
        
        .property-actions {
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
        }
        
        .property-actions button {
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        
        #save-property {
            background-color: #4CAF50;
            color: white;
        }
        
        #cancel-property {
            background-color: #e74c3c;
            color: white;
        }
        
        /* 导出面板 */
        #export-panel {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.9);
            padding: 20px;
            border-radius: 5px;
            z-index: 100;
            display: none;
            width: 300px;
        }
        
        #export-panel h3 {
            margin-top: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        #export-panel .close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            padding: 0;
            margin: 0;
        }
        
        #export-panel input {
            width: 100%;
            padding: 5px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }
        
        #export-panel textarea {
            width: 100%;
            height: 200px;
            padding: 5px;
            box-sizing: border-box;
            font-family: monospace;
            margin-bottom: 10px;
        }
        
        #export-panel button {
            padding: 5px 10px;
            margin-right: 5px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            color: white;
        }
        
        #generate-btn {
            background-color: #4CAF50;
        }
        
        #download-btn {
            background-color: #3498db;
        }
        
        #copy-btn {
            background-color: #9b59b6;
        }
        
        /* 控制栏 */
        #controls {
            padding: 10px;
            background-color: #444;
            display: flex;
            justify-content: space-between;
        }
        
        #controls button {
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            background-color: #3498db;
            color: white;
        }
        
        #controls button:hover {
            background-color: #2980b9;
        }
        
        /* 网格背景 */
        #grid-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 24000px;
            height: 12000px;
            background-image: 
                linear-gradient(#444 1px, transparent 1px),
                linear-gradient(90deg, #444 1px, transparent 1px);
            background-size: 50px 50px;
            z-index: 1;
            transform: scaleY(-1); /* 垂直翻转网格背景 */
        }
        
        /* 镜头指示器 */
        #camera-indicator {
            position: absolute;
            border: 2px dashed #f1c40f;
            z-index: 5;
            pointer-events: none;
            transform: scaleY(-1); /* 垂直翻转镜头指示器 */
        }
    </style>
</head>
<body>
    <div id="controls">
        <div>
            <button id="export-btn">导出关卡</button>
            <button id="clear-btn">清空关卡</button>
        </div>
        <div>
            <span>镜头位置: X: <span id="camera-x">0</span>, Y: <span id="camera-y">0</span></span>
        </div>
    </div>
    
    <div id="editor-container">
        <div id="map-view">
            <div id="grid-background"></div>
            <div id="camera-indicator"></div>
            <!-- 这里将动态添加地图元素 -->
        </div>
        
        <div id="element-panel">
            <div class="element-category">添加元素</div>
            <div class="property-row">
                <label for="element-type">元素类型</label>
                <select id="element-type">
                    <option value="player-start">玩家起始点</option>
                    <option value="door">终点门</option>
                    <option value="play-button">播放按钮</option>
                    <option value="platform">平台</option>
                    <option value="wall">墙壁</option>
                    <option value="key">钥匙</option>
                    <option value="hourglass">沙漏</option>
                    <option value="sign">告示板</option>
                </select>
            </div>
            <div class="property-row">
                <label for="element-x">X坐标</label>
                <input type="number" id="element-x" value="0">
            </div>
            <div class="property-row">
                <label for="element-y">Y坐标</label>
                <input type="number" id="element-y" value="0">
            </div>
            <button id="add-element-btn">添加元素</button>
        </div>
    </div>
    
    <!-- 属性编辑器 -->
    <div id="property-editor">
        <h3>编辑属性</h3>
        <div id="property-fields">
            <!-- 这里将动态添加属性字段 -->
        </div>
        <div class="property-actions">
            <button id="save-property">保存</button>
            <button id="cancel-property">取消</button>
        </div>
    </div>
    
    <!-- 导出面板 -->
    <div id="export-panel">
        <h3>导出关卡
            <button class="close-btn">&times;</button>
        </h3>
        <p>输入关卡编号:</p>
        <input type="number" id="export-level" min="1" value="1">
        <textarea id="export-code" readonly></textarea>
        <div class="export-actions">
            <button id="generate-btn">生成代码</button>
            <button id="download-btn">下载文件</button>
            <button id="copy-btn">复制代码</button>
        </div>
    </div>
    
    <script>
        // 编辑器状态
        const editorState = {
            cameraX: 0,
            cameraY: 0,
            screenWidth: 0,
            screenHeight: 0,
            selectedElement: null,
            elements: [],
            dragging: false,
            dragStartX: 0,
            dragStartY: 0,
            dragElement: null,
            dragOffsetX: 0,
            dragOffsetY: 0
        };
        
        // 默认关卡数据
        const defaultLevel = {
            playerStart: { x: 100, y: 0 },
            platforms: [],
            walls: [],
            door: null,
            playButton: null,
            signs: [],
            keys: [],
            hourglasses: []
        };
        
        // 当前关卡数据
        let currentLevel = JSON.parse(JSON.stringify(defaultLevel));
        
        // DOM元素
        const mapView = document.getElementById('map-view');
        const cameraIndicator = document.getElementById('camera-indicator');
        const cameraXDisplay = document.getElementById('camera-x');
        const cameraYDisplay = document.getElementById('camera-y');
        const exportBtn = document.getElementById('export-btn');
        const clearBtn = document.getElementById('clear-btn');
        const propertyEditor = document.getElementById('property-editor');
        const propertyFields = document.getElementById('property-fields');
        const savePropertyBtn = document.getElementById('save-property');
        const cancelPropertyBtn = document.getElementById('cancel-property');
        const exportPanel = document.getElementById('export-panel');
        const exportLevelInput = document.getElementById('export-level');
        const exportCodeTextarea = document.getElementById('export-code');
        const generateBtn = document.getElementById('generate-btn');
        const downloadBtn = document.getElementById('download-btn');
        const copyBtn = document.getElementById('copy-btn');
        const elementTypeSelect = document.getElementById('element-type');
        const elementXInput = document.getElementById('element-x');
        const elementYInput = document.getElementById('element-y');
        const addElementBtn = document.getElementById('add-element-btn');
        const exportCloseBtn = document.querySelector('#export-panel .close-btn');
        
        // 初始化编辑器
        function initEditor() {
            // 设置初始屏幕尺寸
            updateScreenSize();
            
            // 更新镜头指示器
            updateCameraIndicator();
            
            // 事件监听器
            window.addEventListener('resize', updateScreenSize);
            document.addEventListener('keydown', handleKeyDown);
            
            // 按钮事件
            exportBtn.addEventListener('click', showExportPanel);
            clearBtn.addEventListener('click', clearLevel);
            savePropertyBtn.addEventListener('click', saveElementProperties);
            cancelPropertyBtn.addEventListener('click', hidePropertyEditor);
            generateBtn.addEventListener('click', generateLevelCodeHandler);
            downloadBtn.addEventListener('click', downloadLevelFile);
            copyBtn.addEventListener('click', copyExportCode);
            addElementBtn.addEventListener('click', addElement);
            exportCloseBtn.addEventListener('click', () => exportPanel.style.display = 'none');
            
            // 加载空关卡
            loadLevel(currentLevel);
            
            // 在起始位置添加一个40*60的蓝色方块
            createElement('player-start', defaultLevel.playerStart.x, defaultLevel.playerStart.y);

            // 为地图元素添加双击和右键点击事件
            mapView.addEventListener('dblclick', function(event) {
                if (event.target.classList.contains('map-element')) {
                    editorState.selectedElement = event.target;
                    showPropertyEditor(event.target);
                }
            });

            mapView.addEventListener('contextmenu', function(event) {
                if (event.target.classList.contains('map-element')) {
                    event.preventDefault();
                    if (confirm('确定要删除这个元素吗？')) {
                        deleteElement(event.target);
                    }
                }
            });
        }
        
        // 更新屏幕尺寸
        function updateScreenSize() {
            editorState.screenWidth = mapView.offsetWidth;
            editorState.screenHeight = mapView.offsetHeight;
            updateCameraIndicator();
        }
        
        // 更新镜头指示器
        function updateCameraIndicator() {
            cameraIndicator.style.width = editorState.screenWidth + 'px';
            cameraIndicator.style.height = editorState.screenHeight + 'px';
            cameraIndicator.style.left = (editorState.cameraX * -1) + 'px';
            cameraIndicator.style.top = (editorState.cameraY * -1) + 'px';
            
            cameraXDisplay.textContent = editorState.cameraX;
            cameraYDisplay.textContent = editorState.cameraY;
        }
        
        // 处理键盘输入
        function handleKeyDown(e) {
            const moveAmount = 50;
            
            switch(e.key.toLowerCase()) {
                case 'w':
                    editorState.cameraY += moveAmount;
                    break;
                case 'a':
                    editorState.cameraX -= moveAmount;
                    break;
                case 's':
                    editorState.cameraY -= moveAmount;
                    break;
                case 'd':
                    editorState.cameraX += moveAmount;
                    break;
                default:
                    return;
            }
            
            // 限制镜头范围
            editorState.cameraX = Math.max(0, Math.min(24000 - editorState.screenWidth, editorState.cameraX));
            editorState.cameraY = Math.max(0, Math.min(12000 - editorState.screenHeight, editorState.cameraY));
            
            updateCameraPosition();
            e.preventDefault();
        }
        
        // 更新镜头位置
        function updateCameraPosition() {
            mapView.scrollLeft = editorState.cameraX;
            mapView.scrollTop = editorState.cameraY;
            updateCameraIndicator();
        }
        
        // 添加元素
        function addElement() {
            const elementType = elementTypeSelect.value;
            const x = parseInt(elementXInput.value);
            const y = parseInt(elementYInput.value);
            createElement(elementType, x, y);
        }
        
        // 创建新元素
        function createElement(type, x, y) {
            const element = document.createElement('div');
            element.className = `map-element ${type}`;
            element.dataset.type = type;
            element.style.left = x + 'px';
            element.style.top = y + 'px';
            
            // 设置默认尺寸
            switch(type) {
                case 'platform':
                    element.style.width = '100px';
                    element.style.height = '30px';
                    break;
                case 'wall':
                    element.style.width = '30px';
                    element.style.height = '100px';
                    break;
                case 'player-start':
                    element.style.width = '40px';
                    element.style.height = '60px';
                    break;
                case 'door':
                    element.style.width = '60px';
                    element.style.height = '100px';
                    break;
                case 'play-button':
                    element.style.width = '30px';
                    element.style.height = '30px';
                    break;
                case 'key':
                    element.style.width = '20px';
                    element.style.height = '40px';
                    break;
                case 'hourglass':
                    element.style.width = '30px';
                    element.style.height = '40px';
                    break;
                case 'sign':
                    element.style.width = '200px';
                    element.style.height = '80px';
                    break;
            }
            
            mapView.appendChild(element);
            
            // 添加到关卡数据
            addElementToLevel(type, x, y, element);
            
            // 显示属性编辑器
            editorState.selectedElement = element;
            showPropertyEditor(element);
        }
        
        // 添加元素到关卡数据
        function addElementToLevel(type, x, y, element) {
            switch(type) {
                case 'player-start':
                    currentLevel.playerStart = { x, y };
                    break;
                case 'platform':
                    currentLevel.platforms.push({
                        x, 
                        y,
                        width: parseInt(element.style.width),
                        time: "0"
                    });
                    element.dataset.id = currentLevel.platforms.length - 1;
                    element.textContent = "0"; // 默认显示时间条件
                    break;
                case 'wall':
                    currentLevel.walls.push({
                        x,
                        y,
                        height: parseInt(element.style.height),
                        time: "0"
                    });
                    element.dataset.id = currentLevel.walls.length - 1;
                    element.textContent = "0"; // 显示墙壁时间
                    break;
                case 'door':
                    currentLevel.door = { x, y };
                    break;
                case 'play-button':
                    currentLevel.playButton = { x, y };
                    break;
                case 'key':
                    currentLevel.keys.push({ x, y });
                    element.dataset.id = currentLevel.keys.length - 1;
                    break;
                case 'hourglass':
                    currentLevel.hourglasses.push({ x, y });
                    element.dataset.id = currentLevel.hourglasses.length - 1;
                    break;
                case 'sign':
                    currentLevel.signs.push({
                        x,
                        y,
                        width: parseInt(element.style.width),
                        height: parseInt(element.style.height),
                        text: "双击编辑文本",
                        fontSize: 14,
                        color: "#ffffff"
                    });
                    element.dataset.id = currentLevel.signs.length - 1;
                    break;
            }
        }
        
        // 显示属性编辑器
        function showPropertyEditor(element) {
            const type = element.dataset.type;
            propertyFields.innerHTML = '';
            
            // 添加通用属性
            addPropertyField('x', 'X坐标', parseInt(element.style.left), 'number');
            addPropertyField('y', 'Y坐标', parseInt(element.style.top), 'number');
            
            // 添加特定属性
            switch(type) {
                case 'platform':
                    addPropertyField('width', '宽度', parseInt(element.style.width), 'number');
                    addPropertyField('time', '时间条件', currentLevel.platforms[element.dataset.id].time, 'text');
                    break;
                case 'wall':
                    addPropertyField('height', '高度', parseInt(element.style.height), 'number');
                    addPropertyField('time', '时间条件', currentLevel.walls[element.dataset.id].time, 'text');
                    break;
                case 'sign':
                    const sign = currentLevel.signs[element.dataset.id];
                    addPropertyField('width', '宽度', parseInt(element.style.width), 'number');
                    addPropertyField('height', '高度', parseInt(element.style.height), 'number');
                    addPropertyField('text', '文本', sign.text, 'textarea');
                    addPropertyField('fontSize', '字体大小', sign.fontSize, 'number');
                    addPropertyField('color', '颜色', sign.color, 'color');
                    break;
            }
            
            propertyEditor.style.display = 'block';
        }
        
        // 添加属性字段
        function addPropertyField(name, label, value, type = 'text') {
            const row = document.createElement('div');
            row.className = 'property-row';
            
            const labelEl = document.createElement('label');
            labelEl.textContent = label;
            
            let inputEl;
            
            if (type === 'textarea') {
                inputEl = document.createElement('textarea');
                inputEl.value = value;
            } else {
                inputEl = document.createElement('input');
                inputEl.type = type;
                inputEl.value = value;
            }
            
            inputEl.dataset.property = name;
            
            row.appendChild(labelEl);
            row.appendChild(inputEl);
            propertyFields.appendChild(row);
        }
        
        // 隐藏属性编辑器
        function hidePropertyEditor() {
            propertyEditor.style.display = 'none';
            editorState.selectedElement = null;
        }
        
        // 保存元素属性
        function saveElementProperties() {
            if (!editorState.selectedElement) return;
            
            const element = editorState.selectedElement;
            const type = element.dataset.type;
            const inputs = propertyFields.querySelectorAll('input, textarea');
            
            // 更新元素样式
            inputs.forEach(input => {
                const prop = input.dataset.property;
                const value = input.value;
                
                switch(prop) {
                    case 'x':
                        element.style.left = value + 'px';
                        break;
                    case 'y':
                        element.style.top = value + 'px';
                        break;
                    case 'width':
                        element.style.width = value + 'px';
                        break;
                    case 'height':
                        element.style.height = value + 'px';
                        break;
                }
            });
            
            // 更新关卡数据
            switch(type) {
                case 'player-start':
                    currentLevel.playerStart.x = parseInt(element.style.left);
                    currentLevel.playerStart.y = parseInt(element.style.top);
                    break;
                case 'platform':
                    const platformId = element.dataset.id;
                    currentLevel.platforms[platformId].x = parseInt(element.style.left);
                    currentLevel.platforms[platformId].y = parseInt(element.style.top);
                    currentLevel.platforms[platformId].width = parseInt(element.style.width);
                    currentLevel.platforms[platformId].time = propertyFields.querySelector('[data-property="time"]').value;
                    element.textContent = currentLevel.platforms[platformId].time; // 更新平台上的时间显示
                    break;
                case 'wall':
                    const wallId = element.dataset.id;
                    currentLevel.walls[wallId].x = parseInt(element.style.left);
                    currentLevel.walls[wallId].y = parseInt(element.style.top);
                    currentLevel.walls[wallId].height = parseInt(element.style.height);
                    currentLevel.walls[wallId].time = propertyFields.querySelector('[data-property="time"]').value;
                    element.textContent = currentLevel.walls[wallId].time; // 更新墙壁上的时间显示
                    break;
                case 'door':
                    currentLevel.door.x = parseInt(element.style.left);
                    currentLevel.door.y = parseInt(element.style.top);
                    break;
                case 'play-button':
                    currentLevel.playButton.x = parseInt(element.style.left);
                    currentLevel.playButton.y = parseInt(element.style.top);
                    break;
                case 'key':
                    const keyId = element.dataset.id;
                    currentLevel.keys[keyId].x = parseInt(element.style.left);
                    currentLevel.keys[keyId].y = parseInt(element.style.top);
                    break;
                case 'hourglass':
                    const hourglassId = element.dataset.id;
                    currentLevel.hourglasses[hourglassId].x = parseInt(element.style.left);
                    currentLevel.hourglasses[hourglassId].y = parseInt(element.style.top);
                    break;
                case 'sign':
                    const signId = element.dataset.id;
                    currentLevel.signs[signId].x = parseInt(element.style.left);
                    currentLevel.signs[signId].y = parseInt(element.style.top);
                    currentLevel.signs[signId].width = parseInt(element.style.width);
                    currentLevel.signs[signId].height = parseInt(element.style.height);
                    currentLevel.signs[signId].text = propertyFields.querySelector('[data-property="text"]').value;
                    currentLevel.signs[signId].fontSize = parseInt(propertyFields.querySelector('[data-property="fontSize"]').value);
                    currentLevel.signs[signId].color = propertyFields.querySelector('[data-property="color"]').value;
                    break;
            }
            
            hidePropertyEditor();
        }
        
        // 显示导出面板
        function showExportPanel() {
            exportPanel.style.display = 'block';
            document.getElementById('export-level').focus();
        }
        
        // 生成关卡代码处理函数
        function generateLevelCodeHandler() {
            const levelNum = exportLevelInput.value;
            exportCodeTextarea.value = generateLevelCode(levelNum);
        }
        
        // 生成关卡代码
        function generateLevelCode(levelNum) {
            let code = `// levels/level${levelNum}.js\n`;
            code += `levels[${levelNum}] = ${JSON.stringify(currentLevel, null, 4)};\n`;
            
            // 格式化JSON，确保time属性值被双引号包围
            code = code.replace(/"(\w+)":/g, '$1:')  // 去掉键的双引号
                       .replace(/"(\d+)"/g, '$1')    // 去掉数字值的双引号
                       .replace(/(time: )(\d+)/g, '$1"$2"')  // 确保time值被双引号包围
                       .replace(/\n\s+(\d+)/g, '\n            $1')  // 格式化缩进
                       .replace(/\n\s+}/g, '\n        }')
                       .replace(/\n\s+\]/g, '\n        ]');
            
            return code;
        }
        
        // 下载关卡文件
        function downloadLevelFile() {
            const levelNum = exportLevelInput.value;
            if (!levelNum || levelNum < 1) {
                alert('请输入有效的关卡编号！');
                return;
            }
            
            const code = generateLevelCode(levelNum);
            const blob = new Blob([code], {type: 'text/javascript'});
            const url = URL.createObjectURL(blob);
            
            const a = document.createElement('a');
            a.href = url;
            a.download = `level${levelNum}.js`;
            document.body.appendChild(a);
            a.click();
            
            setTimeout(() => {
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }, 100);
        }
        
        // 复制导出代码
        function copyExportCode() {
            exportCodeTextarea.select();
            document.execCommand('copy');
            alert('代码已复制到剪贴板！');
        }
        
        // 清空关卡
        function clearLevel() {
            if (confirm('确定要清空当前关卡吗？')) {
                currentLevel = JSON.parse(JSON.stringify(defaultLevel));
                loadLevel(currentLevel);
            }
        }
        
        // 加载关卡
        function loadLevel(levelData) {
            // 清除现有元素
            document.querySelectorAll('.map-element').forEach(el => el.remove());
            
            // 添加玩家起始点
            if (levelData.playerStart) {
                createElement('player-start', levelData.playerStart.x, levelData.playerStart.y);
            }
            
            // 添加平台
            if (levelData.platforms) {
                levelData.platforms.forEach((plat, index) => {
                    const element = document.createElement('div');
                    element.className = 'map-element platform';
                    element.dataset.type = 'platform';
                    element.dataset.id = index;
                    element.style.left = plat.x + 'px';
                    element.style.top = plat.y + 'px';
                    element.style.width = plat.width + 'px';
                    element.style.height = '30px';
                    element.textContent = plat.time; // 显示时间条件
                    mapView.appendChild(element);
                });
            }
            
            // 添加墙壁
            if (levelData.walls) {
                levelData.walls.forEach((wall, index) => {
                    const element = document.createElement('div');
                    element.className = 'map-element wall';
                    element.dataset.type = 'wall';
                    element.dataset.id = index;
                    element.style.left = wall.x + 'px';
                    element.style.top = wall.y + 'px';
                    element.style.width = '30px';
                    element.style.height = wall.height + 'px';
                    element.textContent = wall.time; // 显示墙壁时间
                    mapView.appendChild(element);
                });
            }
            
            // 添加门
            if (levelData.door) {
                createElement('door', levelData.door.x, levelData.door.y);
            }
            
            // 添加播放按钮
            if (levelData.playButton) {
                createElement('play-button', levelData.playButton.x, levelData.playButton.y);
            }
            
            // 添加钥匙
            if (levelData.keys) {
                levelData.keys.forEach((key, index) => {
                    const element = document.createElement('div');
                    element.className = 'map-element key';
                    element.dataset.type = 'key';
                    element.dataset.id = index;
                    element.style.left = key.x + 'px';
                    element.style.top = key.y + 'px';
                    element.style.width = '20px';
                    element.style.height = '40px';
                    mapView.appendChild(element);
                });
            }
            
            // 添加沙漏
            if (levelData.hourglasses) {
                levelData.hourglasses.forEach((hourglass, index) => {
                    const element = document.createElement('div');
                    element.className = 'map-element hourglass';
                    element.dataset.type = 'hourglass';
                    element.dataset.id = index;
                    element.style.left = hourglass.x + 'px';
                    element.style.top = hourglass.y + 'px';
                    element.style.width = '30px';
                    element.style.height = '40px';
                    mapView.appendChild(element);
                });
            }
            
            // 添加告示板
            if (levelData.signs) {
                levelData.signs.forEach((sign, index) => {
                    const element = document.createElement('div');
                    element.className = 'map-element sign';
                    element.dataset.type = 'sign';
                    element.dataset.id = index;
                    element.style.left = sign.x + 'px';
                    element.style.top = sign.y + 'px';
                    element.style.width = sign.width + 'px';
                    element.style.height = sign.height + 'px';
                    element.style.fontSize = sign.fontSize + 'px';
                    element.style.color = sign.color;
                    element.textContent = sign.text;
                    mapView.appendChild(element);
                });
            }
        }

        // 删除元素
        function deleteElement(element) {
            const type = element.dataset.type;
            const id = element.dataset.id;

            switch (type) {
                case 'platform':
                    currentLevel.platforms.splice(id, 1);
                    break;
                case 'wall':
                    currentLevel.walls.splice(id, 1);
                    break;
                case 'key':
                    currentLevel.keys.splice(id, 1);
                    break;
                case 'hourglass':
                    currentLevel.hourglasses.splice(id, 1);
                    break;
                case 'sign':
                    currentLevel.signs.splice(id, 1);
                    break;
                case 'player-start':
                    currentLevel.playerStart = null;
                    break;
                case 'door':
                    currentLevel.door = null;
                    break;
                case 'play-button':
                    currentLevel.playButton = null;
                    break;
            }

            element.remove();
        }
        
        // 初始化编辑器
        initEditor();
    </script>
</body>
</html>